<template>
	<div class="b9_foot-back">
	 <div class="b9_foot">
		<el-row v-if="orderButton">
			<el-col :lg="24" :sm="24" :xs="24" >
				<div class="foot_box">
					<div style="border-top: solid 1px rgba(36,36,36,1);"></div>
					<ul class="foot_box_list">
						<li><span class="font_text">關注我們</span></li>
						<li>
							<a><img class="wx_logo" src="../assets/img/7.png"/></a>
							<a><img class="wb_logo" src="../assets/img/2.6.png"/></a>
							<a><img class="wb_logo" src="../assets/img/phone.png"/></a>
						</li>
						<li class="email_go"><button @click="emailForm">訂閱 STATE NO.9 電子郵件</button></li>
					</ul>
					<div class="font-note">
						|<span><a>帮助&信息</a></span>
						|<span><a>联系我们</a></span>
						|<span><a>关注我们</a></span>
						|<span><a>服务</a></span>
						<span><a>贵宾会员计划</a></span>|<br /><br /><br />
						<span><a>服务条款</a></span>
						|<span><a>隐私政策</a></span>
						|<span><a>cookies政策</a></span>
						|<span><a>网站索引</a></span>
						|<span><a>STATE.NO.9</a></span>|
					</div>
				</div>
		   </el-col>
       </el-row>
       <div class="foot_order" v-if="orderForm">
       	    <div class="close_shade"><a @click="closeShade">x</a></div>
       		<h2 class="white-color" style="font-size: 30px;letter-spacing: 5px;" >訂閱最新通知</h2>
       		<div class="foot-order-input white-color" >
       			<el-row :gutter="20">
				  <el-col :lg="12">
				  	   <div>
				  	   	   <label>稱謂*</label><br />
				  		   <input />
				  	   </div>
				  	   <div>
				  	   	    <label>姓名*</label><br />
				  	   	    <input />
				  	   </div>
				  		
				  </el-col>
				  <el-col :lg="12">
				       <div>
				        	<label>郵箱*</label><br />
				  	       <input />
				       </div>
				       <div>
				        	<label>確認郵箱*</label><br />
				  	       <input />
				       </div>
				  	 
				  </el-col>
			   </el-row>
       		</div>
       		
			   <p  style="color: #ADADAD"><input type="checkbox" />我同意邦9收集我的資訊，並向我發送最新優惠通知訂閱</p>
			   <p style="color: #ADADAD;font-size: 12px;" >您有權査詢、更改及删除有關您的個人資料，可以反對有關資料<br/>被使用， 如欲行使有關權利，請發郵件至邦9客服信箱xx@xxxx</p>
			   <p><button> 訂閱 <img src="../assets/img/right.png" /></button></p>
       </div>
	   
  </div>
  </div>
</template>

<script>
	import Vue from 'vue';
	import {Menu,MenuItem} from 'element-ui'
    Vue.use(Menu);
    Vue.use(MenuItem);
export default {
  	name:'Bfoot',
  	mounted(){
  		this.tableData()
    },
    data(){
    	return {
    		msg:1,
    		orderButton:true,
    		orderForm:false
    	}
    },
    methods:{
    	tableData(){
    		let self = this;
			this.msg="";
    	},
    	emailForm(){
    		this.orderButton=false;
    		this.orderForm=true;
    		var footShow = document.getElementsByClassName('b9_foot-back')[0];
    		var whiteColor =document.getElementsByClassName('white-color'); 
    		footShow.style.backgroundColor = "rgba(0,0,0,0.8)";
    	},
    	closeShade(){
    		this.orderButton= true;
    		this.orderForm=false;
    		var footShow = document.getElementsByClassName('b9_foot-back')[0];
    		footShow.style.backgroundColor = "rgba(255,255,255,1)";
    	}
    }
}
</script>
<style>
	.white-color{
		color: #ADADAD;
	}
	.b9_foot-back{
		position: relative;
		top: 50px;
	}
	.foot_order button{
		background: black;
		width: 300px;
		height: 50px;
		color: white;
		line-height: 50px;
		font-size: 14px;
		font-weight: bold;
	}
	.foot-order-input{
		text-align: left;
		font-size: 14px;
	}
	.foot-order-input input{
		width: 100%;
		height: 25px;
		margin: 10px 0;
	}
	
	.el-submenu__icon-arrow{
	display: none!important;
}
.foot_order{
	width: 500px;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	padding-bottom: 50px;
}
.close_shade{
	position: absolute;
	right: 20px;
	top: 10px;
	color: white;
	font-size: 30px;
	display: inline-block;
}
</style>
<style scoped>
	@import url("../assets/css/foot.css");
	
	
</style>